<template>
  <div class="container">
    <!-- 卡片导航 -->
    <el-card class="box-card">

      <!-- 面包屑导航 -->
      <!-- 通过 v-if 判断是否显示该部分 -->
      <el-breadcrumb separator-class="el-icon-arrow-right" v-if="id">
        <el-breadcrumb-item>学科管理</el-breadcrumb-item>
        <el-breadcrumb-item>大数据</el-breadcrumb-item>
        <el-breadcrumb-item>目录管理</el-breadcrumb-item>
        <el-divider></el-divider>
      </el-breadcrumb>
      <!-- 分割线 -->

      <!-- form 标签 -->
      <el-form
        ref="queryInfo"
        :model="queryInfo"
        label-width="80px"
        :inline="true"
      >
        <el-form-item label="目录名称" prop="tagName">
          <el-input
            style="width: 200px"
            v-model="queryInfo.tagName"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="state">
          <!-- <el-select placeholder="请选择" v-model="queryInfo.state">
            <el-option
              v-for="item in selectState"
              :value="item.label"
              :key="item.value"
              :disabled="item.disabled"
            ></el-option>
          </el-select> -->
          <el-select v-model="queryInfo.state" placeholder="请选择">
            <el-option label="已启用" value="1"></el-option>
            <el-option label="已禁用" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button plain @click="clearForm">清除</el-button>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
        </el-form-item>
        <el-form-item class="fr">

          <!-- 返回学科 -->
          <el-link :underline="false" class="back" @click="$router.back()" v-if="id"><i class="el-icon-back"></i>返回学科</el-link>
          <el-button type="success" @click="isDialogFormVisible = true"
            ><i class="el-icon-edit"></i> &nbsp;新增目录</el-button
          >
        </el-form-item>
      </el-form>
      <!-- /form 标签 -->

      <!-- 文字提示框 -->
      <el-alert type="info" show-icon class="alert">
        <div slot="title">一共有{{ total }}条数据</div>
      </el-alert>

      <!-- table 区域 -->
      <el-table style="width: 100%" :data="tagsList">
        <el-table-column label="序号" type="index"> </el-table-column>
        <el-table-column label="所属学科" prop="subjectName"> </el-table-column>
        <el-table-column label="标签名称" prop="tagName"> </el-table-column>
        <el-table-column label="创建者" prop="username"> </el-table-column>
        <el-table-column label="创建日期" prop="addDate">
          <template slot-scope="scope">
            <div>
              {{
                scope.row.addDate | parseTimeByString("{y}-{m}-{d} {h}:{i}:{s}")
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="state">
          <template slot-scope="scope">
            <div>
              {{ scope.row.state ? "已启用" : "已禁用" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" prop="state">
          <template slot-scope="scope">
            <el-button
              size="mini"
              class="disabled"
              style="border: none; padding: 0;background-color: rgba(0, 0, 0, 0);"
              @click="changeStates(scope.row)"
              >{{ scope.row.state ? "禁用" : "启用" }}</el-button
            >
            <el-button
              size="mini"
              :class="{ disabled: scope.row.state ? false : true}"
              :disabled="scope.row.state ? true : false"
              style="border: none; padding: 0;background-color: rgba(0, 0, 0, 0);"
              @click="openCatalog(scope.row)"
              >修改</el-button
            >
            <el-button
              size="mini"
              :class="{ disabled: scope.row.state ? false : true}"
              :disabled="scope.row.state ? true : false"
              style="border: none; padding: 0;background-color: rgba(0, 0, 0, 0);"
              @click="deleteCatalog(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination
        class="fr paging"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="queryInfo.pagesize"
        layout=" prev, pager, next,sizes, jumper"
        :total="total"
      >
      </el-pagination>
      <!-- 分页区域 -->

      <!-- 分页区域 -->
      <!-- <div class="pagination-container">
        <PageTool
        :paginationPage="queryInfo.page"
        :paginationPagesize="queryInfo.pagesize"
        :total="total"
        @pageChange="handleCurrentChange"
        @pageSizeChange="handleSizeChange"
        >
        </PageTool>
      </div> -->
      <!-- /分页区域 -->
    </el-card>

    <!-- 添加目录的对话框 -->
    <el-dialog
      title="新增目录"
      :visible.sync="isDialogFormVisible"
      width="450px"
      @close="addDialogClosed"
    >
      <!-- 内容主体区域 -->
      <el-form :model="addForm" :rules="addFormRules" ref="addForm">
        <el-form-item
          label="所属学科"
          :label-width="formLabelWidth"
          prop="subjectID"
          v-if="!id"
        >
          <!-- 下拉框 -->
          <el-select v-model="addForm.subjectID" placeholder="请选择">
            <el-option
              :label="item.label"
              :value="item.value"
              v-for="item in simpleList"
              :key="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="目录名称"
          :label-width="formLabelWidth"
          prop="tagName"
        >
          <el-input
            v-model="addForm.tagName"
            autocomplete="off"
            placeholder="请选择"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCatalog">确 定</el-button>
      </div>
    </el-dialog>
    <!-- /添加目录的对话框 -->

    <!-- 学科进入的修改目录的对话框 -->
    <!-- <el-dialog
      title="修改目录"
      :visible.sync="isEditFormVisible"
      width="450px"
      @close="addDialogClosed"
    > -->
    <!-- 内容主体区域 -->
    <!-- <el-form
      :model="addForm"
      :rules="addFormRules"
      ref="addForm">
        <el-form-item
          label="目录名称"
          :label-width="formLabelWidth"
          prop="tagName"
        >
          <el-input v-model="addForm.tagName" autocomplete="off"  placeholder="请选择"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isEditFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCatalog">确 定</el-button>
      </div>
    </el-dialog> -->
    <!-- /学科进入的修改目录的对话框 -->

    <!-- 修改目录的对话框 -->
    <el-dialog
      title="修改目录"
      :visible.sync="isEditFormVisible"
      width="450px"
      @close="editDialogClosed"
    >
      <!-- 内容主体区域 -->
      <el-form :model="editForm" :rules="editFormRules" ref="editForm">
        <el-form-item label="所属学科" :label-width="formLabelWidth" v-if="!id">
          <!-- 下拉框 -->
          <el-select v-model="editForm.subjectID" placeholder="请选择" disabled>
            <el-option
              :label="item.label"
              :value="item.value"
              v-for="item in simpleList"
              :key="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="目录名称"
          :label-width="formLabelWidth"
          prop="tagName"
        >
          <el-input
            v-model="editForm.tagName"
            autocomplete="off"
            placeholder="请选择"
            clearable
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isEditFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateCatalog()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- /修改目录的对话框 -->
  </div>
</template>

<script>
// 导入请求模块
import { list, add, update, remove, changeState } from '@/api/hmmm/tags'
// 导入学科详情请求
import { simple } from '@/api/hmmm/subjects.js'
// 导入状态模块
import { status } from '@/api/hmmm/constants.js'
export default {
  name: 'EditTags',
  components: {},
  data () {
    return {
      tagsList: [], // 标签的数据对象
      total: 0, // 总条数
      // 参数列表
      queryInfo: {
        tagName: '',
        // 当前页数
        page: 1,
        // 当前每页显示多少条数据
        pagesize: 10,
        // pageSizes: [5, 10, 15, 20],
        state: null // 下拉框的状态
      },
      // 绑定下拉框里面的数据
      selectState: status,
      value: '',
      // 新增目录的表单数据
      addForm: {
        subjectID: '',
        tagName: ''
      },
      // 修改目录的数据表单
      editForm: {
        id: null,
        subjectID: null,
        tagName: null
      },
      // 新增目录的验证规则
      addFormRules: {
        tagName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' }
        ]
      },
      // 新增目录的验证规则
      editFormRules: {
        tagName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' }
        ]
      },
      formLabelWidth: '85px',
      isDialogFormVisible: false, // 添加目录对话框的显示隐藏
      isEditFormVisible: false, // 修改目录对话框的显示隐藏
      simpleList: [] // 学科的数据列表
    }
  },
  computed: {
    // 利用计算属性, 获取学科传过来的id, 判断部分功能是否显示
    id () {
      return this.$route.query.id
    }
  },
  created () {
    this.loadDataList()
  },
  methods: {
    // 监听 pagesize 改变的事件
    handleSizeChange (newSize) {
      this.queryInfo.pagesize = newSize
      if (this.queryInfo.page === 1) {
        this.loadDataList(this.queryInfo)
      }
    },

    // 监听 页码值 改变的事件
    handleCurrentChange (newPage) {
      this.queryInfo.page = newPage
      this.loadDataList()
    },

    // 搜索操作
    handleSearch () {
      this.queryInfo.pages = 1
      this.loadDataList()
    },

    // 获取标签数据
    async loadDataList (params) {
      const { data: res } = await list(this.queryInfo)
      this.tagsList = res.items
      this.synthesize = res
      this.total = res.counts
      // console.log(res)
      this.loadSubjectsList()
    },

    // 获取学科简单列表
    async loadSubjectsList () {
      const { data } = await simple()
      this.simpleList = data
      // console.log(data)
    },

    // 添加学科按钮操作
    addCatalog () {
      this.$refs.addForm.validate(async (valid) => {
        if (!valid) return
        const { data: res } = await add(this.addForm)
        this.$message.success('添加目录成功!')
        // 重新获取数据列表
        this.loadDataList()
        // 关闭新增目录弹框
        this.isDialogFormVisible = false
        // 将数据追加到列表
        this.tagsList.unshift(...res)
      })
    },

    // 点击按钮清除数据
    clearForm () {
      this.$refs.queryInfo.resetFields()
      // 清除后再刷新列表
      this.loadDataList()
    },

    // 关闭对话框清除数据
    addDialogClosed () {
      this.$refs.addForm.resetFields()
    },

    // 关闭对话框清除数据
    editDialogClosed () {
      this.$refs.editForm.resetFields()
    },

    // 状态改变事件
    async changeStates (row) {
      await changeState({
        id: row.id,
        state: row.state ? 0 : 1
      })
      row.state = !row.state
      // 提示成功
      this.$message.success('修改状态成功!')
    },

    // 修改目录操作
    updateCatalog () {
      this.$refs.editForm.validate(async (valid) => {
        if (!valid) return
        await update(this.editForm)
        // 成功提示
        this.$message.success('修改成功!')
        // 关闭弹框
        this.isEditFormVisible = false
        // 重新获取数据列表
        this.loadDataList()
      })
    },

    // 删除目录操作
    deleteCatalog (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          // 发起删除数据
          await remove({
            id
          })
          // 刷新页面
          this.loadDataList()
          // console.log(res)
        })
        .catch((err) => {
          console.error(err)
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },

    // 打开弹窗操作
    async openCatalog (row) {
      this.isEditFormVisible = true
      this.editForm = row
    }
  }
}
</script>

<style scoped lang='less'>
.box-card {
  margin: 10px;
}
.alert {
  margin-bottom: 15px;
}
.disabled {
  color: #409eff;
}
.paging {
  margin: 15px 0;
}
.el-select {
  width: 100%;
}
.back {
  margin-right: 10px;
  color: #59a6ff;
  .el-icon-back {
    padding-right: 5px;
  }
}
</style>
